<script setup lang="ts" name="warning-index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  getActionStatistics,
  detectionLog,
  exportDetectionLog_,
  getActions,
  getCameraNames,
  getUserList,
  readDetectionLog,
} from "@/api/server_warning";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
const store = useStore();
const router = useRouter();
const actionStatistic = ref<any[]>([]);

const getActionStatisticsList = async () => {
  let res = await getActionStatistics({});
  actionStatistic.value = res.data;
  console.log('res',res)
};
let detectionLogForm = ref<any>({});
let warningList = ref<any>([]);
let detectionLogTatal = ref(0);
let userList = ref<any>([]);
let cameraNames = ref<any>([]);
let actions = ref<any>([]);
let warningDialogVisible = ref(false);
const tablerowClick = async (row: any) => {
  console.log('row.action',row);
  detectionLogForm.value = {
    page: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    userId: "",
    addr: "",
    action: row.action,
  };
  warningDialogVisible.value = true;
  openWarning();
};
const openWarning = async () => {
  let res = await detectionLog({
    ...detectionLogForm.value,
  });
  if (res.result === "success") {
    warningList.value = res.list;
    detectionLogTatal.value = Number(res.total);
  }
};
const exportDetectionLog = async () => {
  let res = await exportDetectionLog_({
    ...detectionLogForm.value,
  });
  if (res.result === "success") {
    const link = document.createElement("a");
    link.href = import.meta.env.VITE_RES_URL + res.url;
    link.setAttribute("download", res.url.split("/").pop());
    document.body.appendChild(link);
    link.click();
  }
};
const openTableItem = async (type: any, data: any) => {
  if (type == "image") {
    Bus.$emit("openImage", {
      link: data.image_url,
    });
  } else {
    Bus.$emit("openVideo", {
      video_url: data.video_url,
    });
  }
  let res = await readDetectionLog({
    id: data.detection_log_id,
  });
  if (res.result === "success") {
    data.is_read = 1;
  }
};
const handleCurrentChange = (page: number) => {
  detectionLogForm.page = page;
  openWarning();
};

const getConfigInfo = async () => {
  let res = await getActions({});
  let res2 = await getCameraNames({});
  let res3 = await getUserList({});
  userList.value = res3.list;
  actions.value = res.actions;
  cameraNames.value = res2.cameraNames;
};

onMounted(() => {
  getConfigInfo();
  getActionStatisticsList();
});
</script>

<template>
  <div class="warning-page">
    <div class="warning_list">
      <app-box
        class="warning_list-block"
        v-for="(item, index) in actionStatistic"
        :key="index"
        :title="item.name"
      >
        <div class="warning_table">
          <el-table
            tooltip-effect="dark" stripe 
            :data="item.actionList"
            size="small"
            style="width: 100%"
            @row-click="tablerowClick"
          >
            <el-table-column
              prop="action"
              align="center"
              label="行为"
              :show-overflow-tooltip="true"
              width="80"
            />
            <el-table-column
              prop="unReadCnt"
              align="center"
              label="未读"
              min-width="55"
            />
            <el-table-column
              prop="todayCnt"
              align="center"
              label="今日"
              min-width="55"
            />
            <el-table-column
              prop="weekCnt"
              align="center"
              label="本周"
              min-width="55"
            />
            <el-table-column
              prop="monthCnt"
              align="center"
              label="月度"
              min-width="55"
            />
            <el-table-column
              prop="yearCnt"
              align="center"
              label="年度"
              min-width="60"
            />
          </el-table>
        </div>
      </app-box>
    </div>
    <el-dialog 
      :close-on-click-modal="true"
      title="行为预警"
      v-model="warningDialogVisible"
      width="1200px"
    >
      <el-form
        :inline="true"
        :model="detectionLogForm"
        size="small"
        class="warning-form-inline"
      >
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="detectionLogForm.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 160px"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 160px"
            v-model="detectionLogForm.endTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="负责人">
          <el-select
            style="width: 100px"
            filterable
            clearable
            v-model="detectionLogForm.userId"
            placeholder="请选择"
          >
            <el-option
              :label="u.name"
              :value="u.user_id"
              v-for="(u, index) in userList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地点">
          <el-select
            style="width: 100px"
            filterable
            clearable
            v-model="detectionLogForm.addr"
            placeholder="请选择"
          >
            <el-option
              :label="u"
              :value="index"
              v-for="(u, index) in cameraNames"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行为">
          <el-select
            style="width: 100px"
            filterable
            clearable
            v-model="detectionLogForm.action"
            placeholder="请选择"
          >
            <el-option
              :label="u"
              :value="index"
              v-for="(u, index) in actions"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openWarning">搜索</el-button>
          <el-button type="primary" @click="exportDetectionLog">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="warningList"
        class="app-table"
        height="400"
        size="small"
        border
      >
        <el-table-column
          label="序号"
          width="100"
          prop="detection_log_id"
        ></el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <span>
              <span v-if="scope.row.is_read == '1'">已读</span>
              <span style="color: red" v-if="scope.row.is_read == '0'"
                >未读</span
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column label="行为" prop="action"></el-table-column>
        <el-table-column
          label="创建时间"
          prop="gmt_create"
          width="200"
        ></el-table-column>
        <el-table-column label="地点" prop="addr"></el-table-column> -->
        <el-table-column label="图片" prop="image_url" show-overflow-tooltip>
          <template #default="scope">
            <span
              style="color: #3d7087; cursor: pointer"
              @click="openTableItem('image', scope.row)"
              >{{ scope.row.image_url }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="视频" prop="video_url" show-overflow-tooltip>
          <template #default="scope">
            <span
              style="color: #3d7087; cursor: pointer"
              @click="openTableItem('video', scope.row)"
              >{{ scope.row.video_url }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop=""></el-table-column>
        <el-table-column label="等级" prop=""></el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        layout="prev, pager, next"
        :page-size="20"
        @current-change="handleCurrentChange"
        v-model:currentPage="detectionLogForm.page"
        :total="detectionLogTatal"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.warning-page {
  width: 100%;
  height: 100%;
  .warning_list-block {
    width: 33%;
    height: calc(50% - 10px);
    margin-top: 5px;
    max-height: 400px;
  }

  .warning_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: calc(100% - 10px);
    overflow-y: auto;
    .warning_table {
      margin-top: 5px;
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
    }
  }
}
.warning-form-inline {
  text-align: left;
  .el-form-item {
    margin-right: 5px !important;
    margin-bottom: 5px !important;
  }
}
</style>
